import React from "react";
import { changeAge, changeUser } from '../../store/actionCreate';//引入行为函数
import { reducer } from '../../store/reducer'; //引入reducer
import { createStore } from '../../store/action'; //引入action
import { DatePicker ,message,Alert,Modal} from 'antd/lib/index';
const store = createStore(reducer);
class App extends React.Component{
    //调用基类的构造方法，第一阶段
    // constructor(props) {
    //     super(props);
    // }
    //即将挂载，此时调用state不会引起重新加载

    componentWillMount(){
        store.subscribe(this.update);
        this.update();
        // this.props.saveImg("asdasdasd");
    }
    //挂载结束，只调用一次
    componentDidMount(){

    }

    componentWillReceiveProps(nextProps) { // 父组件重传props时就会调用这个方法
        this.setState({someThings: nextProps.someThings});
    }
    //state变化，可以优化
    shouldComponentUpdate(nextProps, nextState){

    }
    update = () => {
        console.log(this)
        this.setState(store.getState());
    }
    onChange = (e) => {
        store.dispatch(changeUser(e.target.value));
    }
    onClick = () => {
        store.dispatch(changeAge());
    }
    handleChange = (date) => {
        message.info(`您选择的日期是: ${date.format('YYYY-MM-DD')}`);
        const confirm = Modal.confirm;
        confirm({
            title: 'Do you Want to delete these items?',
            content: 'Some descriptions',
            okText: 'Yes',
            okType: 'danger',
            cancelText: 'No',
            onOk() {
                console.log('OK');
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    render(){
        return (
            <div>
                <Alert message="Success Tips" type="success" showIcon />
                <DatePicker onChange={this.handleChange} />
                <p>user: {this.state.user}, age: {this.state.age}</p>
                user:
                <input type="text" className="input" onChange={this.onChange}/>
                &nbsp;
                <button className="btn" onClick={this.onClick}>年龄增长</button>
            </div>
        );
    }
}

export default App;


